<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>菜单管理</title>
</head>
<body>
<div class="layui-container">
	<div class="layui-form">
		<div class="layui-form-item">
			<div class="layui-inline">
					<input type="text" id="menuName" name="menuName" placeholder="请输入菜单名称"
						autocomplete="off" class="layui-input" lay-verify="menuName">
			</div>
			<div class="layui-inline">
				<button id="submitBtn" class="layui-btn layuiadmin-btn-list" lay-submit=""
								lay-filter="search">
								<i class="layui-icon layui-icon-search"></i>
							</button>
							<button class="layui-btn" onclick="addMenu();" lay-submit data-type="add">添加</button>
			</div>		
				
        </div>
	</div>
	<table class="layui-hide" id="menuTable" lay-filter="menuTable"></table>
	<input type="hidden" id="menuId"/>
</div>
	<script type="text/javascript">
		var menuName = $("#menuName").val();
		var table = layui.table;
		var form = layui.form;
		
		//首次进入页面加载列表数据
		loadTable(table);
		
		//点击查询按钮，加载列表数据
		form.on('submit(search)', function(data){
			loadTable(table);
		});
		table.on('tool(menuTable)', function(obj) {
			var data = obj.data; //获得当前行数据
			var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
			var tr = obj.tr; //获得当前行 tr 的DOM对象
			var id = obj.data.menuId;
			if (layEvent === 'del') {
				layer.confirm('您确定要删除吗？', function(index) {
					obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
					layer.close(index);
					//向服务端发送删除指令
					 $.ajax({
						  url:window.basePath+'/sys/deleteMenu',
							type:"post",
							headers: {"token" : window.token},
						  dataType:'json',
						  data:{
							  menuId:id
						  },
						  success:function(data){
							  if(data){
								  layer.msg(data.message);
							  }
							  tableIns.reload();
						  }
					  });
				});
			}else if (layEvent === 'update') {//修改
				openUpdateView(id);
			}
		})
		
    	//打开新增页面
    	function addMenu(){
// 				$.ajax({
// 					url: window.basePath + "/sys/addMenuView",
// 					method: "post",
// 					headers: {"token" : window.token},
// 					method: "post",
// 					success: function(str) {
// 						layer.open({
// 							type: 2,
// 							content: str //注意，如果str是object，那么需要字符拼接。
// 						});
// 					}
// 				});
					
				
				layer.open({
					type:2,
					title:'新增菜单',
					area: ['450px', '500px'],
					content:window.basePath + "/sys/addMenuView",
					// content: window.basePath + "/admin/views/sys/menuAdd.jsp",
					btn: ['保存','取消'],
						btnAlign: 'c',
						id:'menuView',
						btn1: function(){
							//保存菜单数据
								saveMenuInfo();
						},
						btn2:function(){
							layer.closeAll();
						}
				});
			}
    	
    	function openUpdateView(menuId){
    		$("#menuId").val(menuId);
    		layer.open({
  			  type:2,
  			  title:'修改菜单',
  			  area: ['450px', '500px'],
  			  content:window.basePath + "/sys/updateMenuView,
  			  btn: ['保存','取消'],
  		      btnAlign: 'c',
  		      id:'updateMenuView',
  		      btn1: function(){
  		    	  //保存菜单数据
  	      		  saveMenuInfo();
  		      },
  		      btn2:function(){
  		    	  layer.closeAll();
  		      }
  			});
    	}
    	
    	//保存菜单数据
    	function saveMenuInfo(){
    		var submitBtn = window.frames[0].document.getElementById("submitBtn");
    		$(submitBtn).trigger("click");
    	}
    	
    	//加载table数据列表
    	function loadTable(table){
    		var menuName = $.trim($("#menuName").val());
    		var tableIns = table.render({
    			elem : '#menuTable',
    			url : window.basePath+'/sys/findMenuByPage',
					headers: {"token" : window.token},
					method: "post",
    			where:{menuName:menuName},
    			height : 'full-150',
    			limit:10,
    			cols : [ [{
    				width : 80,
    				title : '序号',
    				type:'numbers'
    			} , {
    				field : 'menuName',
    				width : 200,
    				align : 'left',
    				title : '菜单名称'
    			},{
    				field : 'menuUrl',
    				width : 280,
    				align : 'left',
    				title : '菜单地址'
    			},/* {
    				field : 'menuType',
    				width : 120,
    				align : 'center',
    				title : '菜单类型'
    			}, */{
    				field : 'created',
    				width : 200,
    				align : 'center',
    				title : '创建时间'
    			},{
    				field : 'disabled',
    				width : 100,
    				align : 'center',
    				title : '状态',
    				templet: '#statusTpl'
    			},{
    				fixed : 'right',
    				width : 150,
    				align : 'center',
    				toolbar : '#menuBar',
    				title:"操作"
    			} ] ],
    			text : {
    				none : '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
    			},
    			page : true,
    			done: function(res, curr, count){
    				
    			}
    		});
    	}
	</script>
	<script type="text/html" id="menuBar">
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="update">修改</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script type="text/html" id="statusTpl">
  {{#  if(d.disabled == 1){ }}
    启用
  {{#  } else { }}
    未启用
  {{#  } }}
</script>
</body>

</html>